<template>
  <div class="chat-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="user-info">
        <el-avatar size="large" :src="userIcon"></el-avatar>
        <span class="user-name">{{username}}</span>
      </div>
      <el-button type="primary" @click="newDialog">新建对话</el-button>
      <div v-for="(history,index) in dialogHistory" :key="index" class="dialog-history-item">
        <div class="dialog-content">
          <pre>{{history.content}}</pre>
        </div>
        <div class="dialog-time">{{history.time}}</div>
      </div>
      <el-button type="text" @click="enhanceDialog">会话增强</el-button>
      <el-button type="text" @click="uploadKnowledgeBase">上传个人知识库</el-button>
      <div class="footer">
        <img :src="logo" alt="logo" class="logo" />
        <span>蓝色云途</span>
        <span>v1.0.1025</span>
      </div>
    </div>
    <!-- 聊天区域 -->
    <div class="chat-area">
      <div v-for="(message,index) in messages" :key="index" class="message-item">
        <div v-if="message.sender === 'user'" class="user-message">
          <div class="message-content">{{message.content}}</div>
          <div class="message-actions">
            <el-icon size="18"><Document /></el-icon>
          </div>
        </div>
        <div v-else class="assistant-message">
          <div class="message-content">{{message.content}}</div>
          <div class="message-actions">
            <el-icon size="18"><Document /></el-icon>
          </div>
        </div>
      </div>
      <el-input v-model="inputMessage" placeholder="请输入你的问题或需求" @keyup.enter="sendMessage" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Document } from '@element-plus/icons-vue';

// 模拟用户图标地址
const userIcon = ref('https://via.placeholder.com/30');
// 模拟用户名
const username = ref('chen-test');
// 模拟 logo 地址
const logo = ref('https://via.placeholder.com/50');

// 模拟聊天消息
const messages = ref([
  {sender:'user',content:'你是什么',time:'2024-11-22 09:46:43'},
  {sender:'assistant',content:'我是一个人工智能助手，旨在帮助回答问题和提供信息。',time:'2024-11-22 09:46:45'},
  {sender:'user',content:'你是什么',time:'2024-11-22 09:47:00'},
  {sender:'assistant',content:'我是一个人工智能助手，旨在帮助回答问题和提供信息。',time:'2024-11-22 09:47:05'}
]);

// 模拟对话历史
const dialogHistory = ref([
  {content:'询问return new Promise((resolve, reject) => { login(username, password, code,...',time:'2024-11-22 09:46:43'},
  {content:'提及汽车网',time:'2024-11-21 16:44:14'},
  {content:'提及汽车网',time:'2024-11-21 16:44:14'}
]);

const inputMessage = ref('');

// 新建对话
const newDialog = () => {
  console.log('新建对话');
};

// 会话增强
const enhanceDialog = () => {
  console.log('会话增强');
};

// 上传个人知识库
const uploadKnowledgeBase = () => {
  console.log('上传个人知识库');
};

// 发送消息
const sendMessage = () => {
  if (inputMessage.value) {
    messages.value.push({
      sender:'user',
      content:inputMessage.value,
      time:new Date().toLocaleString()
    });
    // 模拟助手回复
    setTimeout(() => {
      messages.value.push({
        sender:'assistant',
        content:'这是助手的回复',
        time:new Date().toLocaleString()
      });
    },1000);
    inputMessage.value = '';
  }
};
</script>

<style scoped>
.chat-container{display:flex;height:100vh;}
.sidebar{width:200px;background-color:#f0f2f5;padding:10px;}
.user-info{display:flex;align-items:center;margin-bottom:10px;}
.user-name{font-size:18px;font-weight:bold;}
.dialog-history-item{margin-bottom:10px;}
.dialog-content pre{margin:0;white-space:pre-wrap;}
.dialog-time{font-size:12px;color:#999;}
.footer{display:flex;align-items:center;justify-content:space-between;margin-top:20px;}
.logo{width:50px;height:50px;}
.chat-area{flex:1;background-color:#fff;padding:10px;display:flex;flex-direction:column;}
.message-item{margin-bottom:10px;}
.user-message{align-self:flex-end;background-color:#3b82f6;color:#fff;padding:10px;border-radius:10px;max-width:70%;}
.assistant-message{align-self:flex-start;background-color:#f0f2f5;padding:10px;border-radius:10px;max-width:70%;}
.message-content{margin-bottom:5px;}
.message-actions{display:flex;}
.message-actions el-icon{margin-right:5px;}
.el-input{margin-top:auto;}
</style>